<template>
  <div class="newGroup">

    <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
      <el-button  @click='appBack' type="primary"> < 返回 </el-button>
    </el-breadcrumb>

    <div class="title-container">
      <div class="title lf">{{currentStatus==='new'?'新增':'编辑'}}分组</div>
    </div>
    <div class="add-container">
      <div class="add-item clearfix">
        <div class="labelName lf">分组图标：</div>
        <div class="uploadImg-box lf">
          <div v-if="!icon" class="uploadImg-tips">
            <div class="add-icon">+</div>
            <div class="des">添加图片</div>
            <input type="file" class="uploadInputFile" @click="uploadImg($event)">
          </div>
          <div v-else class="previewImages">
            <img :src="showImage" alt="">
            <div class="change-btn">
              重新上传<input type="file" class="uploadInputFile" @click="uploadImg($event)">
            </div>
          </div>
        </div>
      </div>

      <div class="add-item clearfix">
        <div class="labelName lf">分组名称：</div>
        <div class="elInput lf">
          <el-input v-model="group_name" maxlength="3"></el-input>
        </div>
      </div>

      <div class="add-item clearfix">
        <div class="labelName lf">排序权重：</div>
        <div class="elInput lf">
          <el-input v-model="sort"></el-input>
        </div>
      </div>

      <div class="add-item clearfix" style="margin-bottom: 60px;" >
        <div class="labelName lf">组别类型：</div>
        <div class="elInput lf">
          <el-select v-model="type" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>

      <div class="btns">
        <el-button v-show="currentStatus==='edit'" class="elButton" @click="edit" type="primary">编辑</el-button>
        <el-button v-show="currentStatus==='new'" class="elButton" @click="save" type="primary">保存</el-button>
        <el-button class="elButton" @click="cancel">取消</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "newCategory",
  components: {

  },
  methods: {
    //回退按钮
    appBack() {
      window.history.back();
    },

    //编辑
    edit() {
      let reqArr = [
        ["icon", "string", "请上传分组图片"],
        ["group_name", "string", "请输入分组名称"],
        ["sort", "", "请输入排序权重"]
      ];
      let res = this.$requiredFun(reqArr, this);
      if (res.state) {
        let formData = new FormData();
        formData.append("parent_id", 0);
        formData.append('id',this.$route.params.targetId);
        formData.append("name", this.group_name);
        formData.append("sort", this.sort);
        formData.append("icon", this.icon);
        formData.append("type", this.type);
        this.$http(
          "/wgl_admin/index.php?app=group&act=edit",
          "post",
          {},
          {},
          formData,
          success => {
            this.$message.success("编辑成功");
            this.$router.push({
              name: "category",
              params: {
                type: 2
              }
            });
          },
          error => {
            console.log(error);
            this.$message.error(error.state.msg);
          }
        );
      } else {
        this.$message.error(res.msg);
      }
    },

    //取消
    cancel() {
      history.go(-1);
    },

    //新增分类
    save() {
      let reqArr = [
        ["icon", "string", "请上传分组图片"],
        ["group_name", "string", "请输入分组名称"],
        ["sort", "", "请输入排序权重"]
      ];
      let res = this.$requiredFun(reqArr, this);
      if (res.state) {
        let formData = new FormData();
        formData.append("parent_id", 0);
        formData.append("name", this.group_name);
        formData.append("sort", this.sort);
        formData.append("icon", this.icon);
        formData.append("type", this.type);
        this.$http(
          "/wgl_admin/index.php?app=group&act=add",
          "post",
          {},
          {},
          formData,
          success => {
            this.$message.success("新增成功");
            this.$router.push({
              name: "category",
              params: {
                type: 2
              }
            });
          },
          error => {
            console.log(error);
            this.$message.error(error.state.msg);
          }
        );
      } else {
        this.$message.error(res.msg);
      }
    },
    uploadImg(e) {
      const currentDOM = e.target;
      //清空files
      currentDOM.value = "";
      let self = this;
      function readFile() {
        let image = this.files[0];
        let formData = new FormData();
        formData.append("belong", 8);
        formData.append("image", image);
        //开始上传图片
        self.$http(
          "/wgl_admin/index.php?app=upload_img",
          "post",
          {},
          {},
          formData,
          success => {
            self.icon = success.data.store_path;
            self.showImage = success.data.file_path;
          },
          error => {
            self.$message.error(error.state.msg);
          }
        );
      }
      currentDOM.addEventListener("change", readFile);
    },
    handleClickChangeType(data) {},

    //获取组分类详情
    getGroupDetail(targetId) {
      console.log(targetId);
      this.$http(
        "/wgl_admin/index.php?app=group&act=edit",
        "get",
        {},
        { id: targetId },
        {},
        success => {
          console.log(success);
          this.showImage = success.data.icon_url;
          this.icon = success.data.icon;
          this.sort = success.data.sort;
          this.group_name = success.data.name;
          this.type = success.data.type;
          //缺少一个参数 组别类型
        },
        error => {
          this.$message.error(error.state.msg);
        }
      );
    },

    //获取 组别类型
    getGroupType() {
      this.$http(
        "/wgl_admin/index.php?app=group&act=group_type",
        "get",
        {},
        {},
        {},
        success => {
            console.log("success:",success);
            let tempArr = [];
            success.data.forEach(( cVal, index, arr )=>{
              tempArr[index] = {};
              tempArr[index].value = index;
              tempArr[index].label = cVal;
            });
            this.options = tempArr;
        },
        error => {
          this.$message.error(error.state.msg);
        }
      )
    }


  },
  created() {
    this.currentStatus = this.$route.params.status;
    if (this.currentStatus === "edit") {
      this.getGroupDetail(this.$route.params.targetId); //获取详情
      this.getGroupType();
    }
  },
  mounted() {
    this.getGroupType();
  },
  data() {
    return {
      type: 0,
      options: [],
//      options: [
//        {
//          value: 0,
//          label: "默认"
//        },
//        {
//          value: 1,
//          label: "兑换"
//        },
//        {
//          value: 2,
//          label: "拼团"
//        },
//        {
//          value: 3,
//          label: "组词消消乐"
//        }
//      ],
      uploadAction: "",
      group_name: "",
      sort: "",
      icon: "", //上传的图片
      showImage: "",
    };
  }
};
</script>
<style lang="scss" scoped>
.newGroup {
  width: 100%;
  height: 100%;
  position: relative;
  // padding-left: 118px;
  .add-container {
    width: 1466px;
    height: 540px;
    margin: 0 50px;
    background: #fff;
    border: 1px solid #e6e8f4;
    padding: 100px 62px;
    .add-item {
      margin-bottom: 20px;
      .labelName {
        height: 40px;
        line-height: 40px;
        margin-right: 10px;
        font-size: 12px;
        color: #333;
      }
    }
  }
  .title-container {
    width: 1466px;
    height: 70px;
    padding-left: 50px;
    .title {
      font-size: 22px;
      color: #333;
      height: 100%;
      line-height: 70px;
    }
  }
}
.btns {
  > .elButton {
    width: 150px;
  }
}
.uploadImg-box {
  width: 110px;
  height: 110px;
  border: 1px solid #e6e8f4;
  background: #f8f9fe;
  position: relative;
  .uploadImg-tips {
    width: 100%;
    height: 100%;
    .add-icon {
      text-align: center;
      color: #e6e8f7;
      font-size: 40px;
      height: 70px;
      line-height: 70px;
    }
    .des {
      font-size: 14px;
      text-align: center;
      color: #a6a8a5;
    }
  }
  .previewImages {
    display: block;
    width: 100%;
    height: 100%;
    > img {
      display: block;
      height: 100%;
      width: 100%;
    }
    .change-btn {
      position: absolute;
      bottom: 0;
      text-align: center;
      width: 100%;
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      height: 24px;
      line-height: 24px;
      left: 0;
      cursor: pointer;
      font-size: 12px;
      cursor: pointer;
    }
    .change-btn:hover {
      background: #333;
    }
  }
  .uploadInputFile {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    z-index: 9999;
    cursor: pointer;
  }
}
</style>
